@time-picker-prefix-cls: ~"@{css-prefix}time-picker";
@picker-prefix-cls: ~"@{css-prefix}picker";
@date-picker-cells-width: 216px;

@time-spinner-prefix-cls: ~"@{css-prefix}time-spinner";
@time-spinner-cells-width-base: 70px;
@time-spinner-cells-width: @time-spinner-cells-width-base * 2;
@time-spinner-cells-width-with-seconds: @time-spinner-cells-width-base *3;
@time-spinner-cells-width-base-range: 30px;
@time-spinner-cells-width-range: @time-spinner-cells-width-base-range * 2;
@time-spinner-cells-width-with-seconds-range: @time-spinner-cells-width-base-range * 3;

.@{time-picker-prefix-cls} {
  ::-webkit-scrollbar {
    width: 4px;
    cursor: pointer;
  }
  ::-webkit-scrollbar-track {
    background-color: @color-scrollbar-track !important;
  }
  ::-webkit-scrollbar-thumb {
    background-color: @color-scrollbar !important;
    border-radius: 4px;
  }
  display: inline-block;
  line-height: normal;
  &-rel{
    position: relative;
  }
  .@{css-prefix}input-suffix .@{css-prefix}icon {
    font-size: @font-size-middle;
    color: @color-complementary-5;
  }
  .@{select-dropdown-prefix-cls} {
    width: auto;
    padding: 0;
    overflow: visible;
    max-height: none;
  }
  &-transfer{
    z-index: @zindex-transfer;
    max-height: none;
    width: auto;
  }

  &-focused input{
    .active();
  }
}

.@{time-spinner-prefix-cls} {
  &-cells{
    display: flex;
    justify-content: center;
    align-items:center;
    padding: 0 16px;
    &-with-seconds{
      min-width: @time-spinner-cells-width-with-seconds;
    }

    &-list{
      width: @time-spinner-cells-width-base;
      max-height: 212px;
      float: left;
      overflow: hidden;
      position: relative;
      &:hover{
        overflow-y: auto;
      }
      ul{
        width: 100%;
        margin: 0;
        list-style: none;
        padding: 0 0 190px 0;
        li{
          padding-left: 25px;
          height: 24px;
          line-height: 24px;
          margin: 8px 0 0 0;
          box-sizing: content-box;
          text-align: left;
          user-select: none;
          cursor: pointer;
          list-style: none;
          transition: background @transition-time @ease-in-out;

        }
      }
      &:first-child ul li {
        border-radius: 2px 0 0 2px;
      }
      &:last-child ul li {
        border-radius: 0 2px 2px 0;
      }
    }
    &-cell{
      &:hover{
        background: @color-bg-hover;
      }
      &-disabled {
        color: @color-complementary-6;
        cursor: @cursor-disabled;

        &:hover {
          color: @color-complementary-6;
          background-color: @color-bg-disable;
          cursor: @cursor-disabled;
        }
      }
      &-selected ,&-selected:hover{
        height: 24px;
        color: @color-functional-white;
        background: @color-brand-primary;
      }
      &-focused{
        background-color: tint(@color-brand-primary, 80%);
      }
    }
  }

  &-header{
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-bottom: 1px solid @color-complementary-2;
  }

  &-with-range{
    .@{picker-prefix-cls}-panel{
      &-body{
        min-width: @time-spinner-cells-width-range * 2 + 4px;
      }
      &-content{
        float: left;
        position: relative;
        &-right{
          float: right;
          &:after{
            right: auto;
            left: -2px;
          }
        }
      }
    }
    .@{time-spinner-prefix-cls}-cells{
      &-with-seconds{
        min-width: @time-spinner-cells-width-with-seconds-range;
      }
      &-list{
        width: @time-spinner-cells-width-base-range;
        ul {
          li {
            padding-left: 7px;
          }
        }
        &:first-child{
          border-radius: 0;
        }
        &:last-child{
          border-radius: 0;
        }
      }
    }
  }
}
